<template>
    <div class="system-menu-container" v-loading="loading">
        <div class="breadcrumb-box">
            <Breadcrumb />
        </div>
        <div class="page-content">
            <div class="page-content-left">
                <el-input v-model="searchText" @input="searchData = []" placeholder="请输入模板名称" @keyup.enter="handleSearch" :suffix-icon="Search"/>
                <div class="tree-scroll">
                    <el-tree 
                        v-if="!searchText"
                        lazy
                        :default-expanded-keys="defaultExpandedKeys" 
                        node-key="id" 
                        :highlight-current="true" 
                        :current-node-key="selectedTemplateId"
                        :load="loadTreeData" 
                        :props="defaultProps" 
                        @node-click="handleNodeClick" >
                        <template #default="{ node, }" >
                            <span class="custom-tree-node" :title="node.label" v-text="node.label">
                            </span>
                        </template>
                    </el-tree>
                    <el-tree 
                        :props="defaultProps" 
                        v-else 
                        node-key="id" 
                        :highlight-current="true" 
                        :current-node-key="selectedTemplateId"
                        @node-click="handleNodeClick"
                        :data="searchData">
                        <template #default="{ node, }" >
                            <span class="custom-tree-node" :title="node.label" v-text="node.label">
                            </span>
                        </template>
                    </el-tree>
                </div>
            </div>
            <div class="page-content-right">
                <object :data="selectedTemplateContent" type="application/pdf" width="100%" height="100%">
                    <param name="view" value="FitH">
                </object>
            </div>
        </div>
        <div class="text-input">
            <el-input v-model="smsText" type="textarea" resize="none" rows="3" placeholder="请输入短信模板"></el-input>
        </div>
        <div class="page-footer">
            <el-button type="" @click="handleCancel">取消</el-button>
            <el-button type="primary" @click="handleSendSMS">发送</el-button>
        </div>
    </div>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import { educationGetRecordDetail, educationRecordEditSend, educationTemplateList } from "/@/api/education";
// 引入组件
import { Search } from '@element-plus/icons-vue'
import { useRoute, useRouter } from 'vue-router';
import { ElMessage  } from "element-plus";
import { toolsApi } from '/@/api/tools';
const Breadcrumb = defineAsyncComponent(() => import('/@/layout/navBars/breadcrumb/breadcrumb.vue'));


const router = useRouter()
const route = useRoute()
const id = route.query.id
const searchText = ref('')
const smsText = ref('')
const loading = ref(false)
const info = ref({})
const defaultExpandedKeys = ref([])
const selectedTemplateId = ref('')
const selectedTemplateContent = ref('')
const searchData = ref([])

const defaultProps = {
    children: 'children',
    label: 'label',
    isLeaf:"leaf"
}

onMounted(()=>{
    getDetail()
})

const handleNodeClick = (data)=>{
    console.log(data)
    if(data.leaf){
        selectedTemplateContent.value = data.content
        selectedTemplateId.value = data.id
    }
}
const handleCancel = () =>{
    router.back()
}

const handleSearch = async ()=> {
    const res = await educationTemplateList({
        page: 1,
        page_size: 100000,
        department_id: '',
        name: searchText.value
    })
    searchData.value = res.data.items.map(v => ({ id: v.id, content: v.content, label: v.name, leaf: true }))
}

const getDetail = async() =>{
    try {
        loading.value = true
        const res = await educationGetRecordDetail({id})
        info.value = res.data
        smsText.value = res.data.sms || ''
        defaultExpandedKeys.value = [res.data.education_template.department_id]
        // selectedTemplateId.value = res.data.education_template_id
        selectedTemplateContent.value = res.data.education_template.content
    } finally {
        loading.value = false
    }
}

const handleSendSMS = async ()=>{
    try {
        loading.value = true
        // 缺少模板ID
        await educationRecordEditSend({
            id,
            education_template_id: selectedTemplateId.value,
            sms: smsText.value
        })
        ElMessage.success("发送成功")
    } finally {
        loading.value = false
    }
}

// const getDepartmentList = async ()=>{
//     const res = await toolsApi().departmentList({all:1})
//     console.log(res)
//     treeData.value = res.data.map(v=>({id:v.id, label: v.departmentName, children:[]}))
// }

const handleTreeData = async (resolve) =>{
    if (info.value) {
        const res = await toolsApi().departmentList({ all: 1 })
        const child = await educationTemplateList({
            page: 1,
            page_size: 100000,
            department_id: info.value.education_template.department_id,
            name: ""
        })
        
        // 选中id
        selectedTemplateId.value = info.value.education_template_id

        return resolve(res.data.map(v => {
            if(v.id === info.value.education_template.department_id) {
                return {
                    id: v.id,
                    label: v.departmentName,
                    children: child.data.items.map(v => ({ id: v.id, content:v.content, label: v.name, leaf: true }))
                }
            } else {
                return {
                    id: v.id,
                    label: v.departmentName,
                }
            }
        }))
    } else {
        setTimeout(()=>{
            handleTreeData()
        }, 1000)
    }
}

const loadTreeData = async (node, resolve)=>{
    if(node.level === 0) {
        handleTreeData(resolve)
    } else {
        if(node.data.id === info.value.education_template.department_id) {
            resolve(node.data.children)
        } else {
            const res = await educationTemplateList({
                page: 1,
                page_size: 100000,
                department_id: node.data.id,
                name: ""
            })

            return resolve(res.data.items.map(v => ({ id: v.id, content:v.content, label: v.name, leaf: true })))
        }
    }
}


</script>
<style lang="scss">

.system-menu-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 50px);
}
.page-content {
    flex: 1;
    margin-left: 10px;
    background-color: #fff;
    width: calc(100% - 20px);
    margin-top: 10px;
    overflow: auto;
    border-radius: 4px;
    display: flex;
    align-items: flex-start;
    overflow: hidden;
    //通过自定义树形结构行内容，实现文本过多时数据不显示的问题，现在效果为显示省略号，且鼠标移上去会显示出全部文本内容
.custom-tree-node {
    width: 100%; 
    overflow: hidden !important; // 溢出部分隐藏
    white-space: nowrap !important; //禁止自动换行
    text-overflow: ellipsis !important; // 使溢出部分以省略号显示
    display: block !important;
    font-size: 16px;
}
    .page-content-left {
        width: 20%;
        height: 100%;
        box-sizing: border-box;
        padding: 20px;
        // overflow-y: auto;
        display: flex;
        flex-direction: column;
        .tree-scroll {
            flex: 1;
            overflow-y: auto;
            margin-top: 20px;
        }
    }
    .page-content-right {
        width: 80%;
        height: 100%;
        box-sizing: border-box;
        padding-top: 20px;
        padding-right: 20px;
    }
}
.text-input {
    height: 100px;
    width: calc(100% - 20px);
    margin-left: 10px;
    background-color: #fff;
    box-sizing: border-box;
    padding: 0 20px;
    padding-top: 20px;
}
.page-footer {
    background-color: #fff;
    width: calc(100% - 20px);
    padding: 20px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 10px;
    box-sizing: border-box;
    margin-bottom: 10px;
}

</style>